<template>
  <div class="carbon-footprint-page">
    <!-- 基本信息 -->
    <a-card title="产品碳足迹 - 基本信息" class="flex-card">
      <a-form layout="vertical">
        <a-form-item label="产品名称">
          <a-input
            style="width: 300px"
            v-model:value="productInfo.name"
            placeholder="请输入产品名称"
          />
        </a-form-item>
        <a-form-item label="产品描述">
          <a-textarea
            style="width: 300px"
            v-model:value="productInfo.description"
            placeholder="请输入产品描述"
          />
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 原材料获取 -->
    <a-card title="数据录入 - 原材料获取" class="flex-card">
      <a-form layout="vertical">
        <a-form-item label="材料类型">
          <a-select
            style="width: 300px"
            v-model:value="materialData.type"
            placeholder="请选择材料类型"
            :options="rawTypes"
            :fieldNames="{ label: 'materialName', value: 'rawMaterialTypesId' }"
          >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 300px" label="材料用量 (kg)">
          <a-input v-model:value="materialData.amount" placeholder="请输入材料用量" />
        </a-form-item>
        <a-form-item style="width: 300px" label="排放因子 (kg CO2e/kg)">
          <a-input
            v-model:value="materialData.emissionFactor"
            placeholder="请输入排放因子"
          />
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 生产制造 -->
    <a-card title="数据录入 - 生产制造" class="flex-card">
      <a-form layout="vertical">
        <a-form-item label="能源类型">
          <a-select
            style="width: 300px"
            v-model:value="manufacturingData.energyType"
            placeholder="请选择能源类型"
            :options="EnergyType"
            :fieldNames="{ label: 'energyName', value: 'energyTypesId' }"
          >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 300px" label="使用量 (kWh, m³, L)">
          <a-input v-model="manufacturingData.energyUsage" placeholder="请输入使用量" />
        </a-form-item>
        <a-form-item style="width: 300px" label="排放因子 (kg CO2e/kWh)">
          <a-input
            v-model="manufacturingData.emissionFactor"
            placeholder="请输入排放因子"
            style="width: 300px"
          />
        </a-form-item>
        <a-form-item label="工艺环节">
          <a-checkbox v-model="manufacturingData.hasProcesses"
            >是否启用工艺环节</a-checkbox
          >
          <a-button @click="openProcessConfig" type="primary" style="margin-top: 10px"
            >配置工艺环节</a-button
          >
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 运输 -->
    <a-card title="数据录入 - 运输" class="flex-card">
      <a-form layout="vertical">
        <a-form-item label="运输方式">
          <a-select
            style="width: 300px"
            v-model:value="transportData.type"
            placeholder="请选择运输方式"
            :options="transportType"
            :fieldNames="{ label: 'transportMode', value: 'transportId' }"
          >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 300px" label="运输距离 (公里)">
          <a-input v-model="transportData.distance" placeholder="请输入运输距离" />
        </a-form-item>
        <a-form-item style="width: 300px" label="运输量 (吨)">
          <a-input v-model="transportData.amount" placeholder="请输入运输量" />
        </a-form-item>
        <a-form-item style="width: 300px" label="排放因子 (kg CO2e/吨公里)">
          <a-input v-model="transportData.emissionFactor" placeholder="请输入排放因子" />
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 使用 -->
    <a-card title="数据录入 - 使用" class="flex-card">
      <a-form layout="vertical">
        <a-form-item style="width: 300px" label="使用阶段能源消耗 (kWh, m³, L)">
          <a-input v-model="usageData.energyUsage" placeholder="请输入使用阶段能源消耗" />
        </a-form-item>
        <a-form-item style="width: 300px" label="排放因子 (kg CO2e/kWh)">
          <a-input v-model="usageData.emissionFactor" placeholder="请输入排放因子" />
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 废弃处理 -->
    <a-card title="数据录入 - 废弃处理" class="flex-card">
      <a-form layout="vertical">
        <a-form-item label="处理方式">
          <a-select
            style="width: 300px"
            v-model="disposalData.method"
            placeholder="请选择处理方式"
            :options="abandonType"
            :fieldNames="{ label: 'treatmentMethodName', value: 'treatmentMethodId' }"
          >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 300px" label="处理量 (kg)">
          <a-input v-model="disposalData.amount" placeholder="请输入处理量" />
        </a-form-item>
        <a-form-item style="width: 300px" label="排放因子 (kg CO2e/kg)">
          <a-input v-model="disposalData.emissionFactor" placeholder="请输入排放因子" />
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 碳足迹计算按钮及结果 -->
    <div class="calculate-section">
      <a-button type="primary" @click="calculateCarbonFootprint">计算碳足迹</a-button>
    </div>

    <a-card title="碳足迹计算结果" class="result-card" v-if="calculated">
      <p><strong>总碳足迹：</strong>{{ totalCarbonFootprint }} kg CO2e</p>
      <p><strong>各环节碳足迹：</strong></p>
      <ul>
        <li>原材料获取: {{ materialData.footprint }} kg CO2e</li>
        <li>生产制造: {{ manufacturingData.footprint }} kg CO2e</li>
        <li>运输: {{ transportData.footprint }} kg CO2e</li>
        <li>使用: {{ usageData.footprint }} kg CO2e</li>
        <li>废弃处理: {{ disposalData.footprint }} kg CO2e</li>
      </ul>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { abandon } from "/@/api/type/abandon";
import { energy } from "/@/api/type/Energy";
import { raw } from "/@/api/type/Raw";
import { transport } from "/@/api/type/transport";

const productInfo = ref({
  name: "",
  description: "",
});

const materialData = ref({
  type: "",
  amount: null,
  emissionFactor: null,
  footprint: null,
});

const manufacturingData = ref({
  energyType: "",
  energyUsage: null,
  emissionFactor: null,
  hasProcesses: false,
  footprint: null,
});

const transportData = ref({
  type: "",
  distance: null,
  amount: null,
  emissionFactor: null,
  footprint: null,
});

const usageData = ref({
  energyUsage: null,
  emissionFactor: null,
  footprint: null,
});

const disposalData = ref({
  method: "",
  amount: null,
  emissionFactor: null,
  footprint: null,
});

const totalCarbonFootprint = ref(0);
const calculated = ref(false);

const calculateCarbonFootprint = () => {
  materialData.value.footprint =
    materialData.value.amount * materialData.value.emissionFactor;
  manufacturingData.value.footprint =
    manufacturingData.value.energyUsage * manufacturingData.value.emissionFactor;
  transportData.value.footprint =
    transportData.value.distance *
    transportData.value.amount *
    transportData.value.emissionFactor;
  usageData.value.footprint =
    usageData.value.energyUsage * usageData.value.emissionFactor;
  disposalData.value.footprint =
    disposalData.value.amount * disposalData.value.emissionFactor;

  totalCarbonFootprint.value =
    materialData.value.footprint +
    manufacturingData.value.footprint +
    transportData.value.footprint +
    usageData.value.footprint +
    disposalData.value.footprint;

  calculated.value = true;
};
//材料类型
const rawTypes = ref([]);
async function queryRawTypes() {
  let queryResult = await raw.query({
    pageNum: 1,
    pageSize: 100,
  });
  rawTypes.value = queryResult.data.list;
}
//能源类型
const EnergyType = ref([]);
async function queryEnergyType() {
  let queryResult = await energy.query({
    pageNum: 1,
    pageSize: 100,
  });
  console.log(queryResult.data.list);
  EnergyType.value = queryResult.data.list;
}
//运输方式
const transportType = ref([]);
async function querytransportType() {
  let queryResult = await transport.query({
    pageNum: 1,
    pageSize: 100,
  });
  transportType.value = queryResult.data.list;
}
//废弃方式
const abandonType = ref([]);
async function queryabandonType() {
  let queryResult = await abandon.query({
    pageNum: 1,
    pageSize: 100,
  });
  abandonType.value = queryResult.data.list;
}
onMounted(() => {
  queryRawTypes();
  queryEnergyType();
  querytransportType();
  queryabandonType();
});
</script>

<style scoped>
.carbon-footprint-page {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  background: #f0f2f5;
}

.flex-card {
  flex: 1 1 48%;
  min-width: 270px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calculate-section {
  width: 100%;
  display: flex;
  /* justify-content: center; */
  margin-top: 16px;
}

.result-card {
  width: 100%;
  margin-top: 10px;
}

a-input,
a-select,
a-textarea {
  width: 270px;
}
</style>
